<template>
  <div class="login-container">
    <div class="login-card">
      <div class="login-header">
        <h1>物业管理系统</h1>
        <h2>欢迎登录</h2>
      </div>
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="form-group">
          <label for="username">用户名</label>
          <input id="username" type="text" v-model="username" placeholder="请输入用户名" required>
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input id="password" type="password" v-model="password" placeholder="请输入密码" required>
        </div>
        <button type="submit">登 录</button>
        <p v-if="error" class="error-message">{{ error }}</p>
      </form>
      <div class="register-link">
        还没有账号？ <router-link to="/register">立即注册</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { ElNotification } from 'element-plus';
export default {
  name: 'LoginPage',
  data() {
    return {
      username: '',
      password: '',
      error: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await fetch('http://localhost:8080/api/owners/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            username: this.username,
            password: this.password
          })
        });

        // 处理响应
        if (response.ok) {
          const data = await response.json();

          // 只保存必要的用户信息，避免时间相关字段
          const userInfo = {
            ownerId: data.ownerId,
            name: data.name,
            username: data.username,
            contactInfo: data.contactInfo,
            propertyId: data.propertyId,
            newsPreferences: data.newsPreferences
          };

          localStorage.setItem('user', JSON.stringify(userInfo));
          alert('登录成功！');
          const response1 = await this.selectState(userInfo.ownerId);
          if (response1.name && response1.money) {
            ElNotification({
              title: '费用提醒',
              message: `您${response1.name}未缴纳的费用${response1.money}，请及时缴纳！`,
              type: 'warning',
              duration: 0,  // 0 表示通知不会自动消失
              position: 'top-right'
            });
          }
          this.$router.push('/');
        } else {
          const errorData = await response.text();
          this.error = errorData || '用户名或密码错误';
        }
      } catch (err) {
        console.error('Login error:', err);
        this.error = '登录请求失败，请稍后重试';
      }
    },
    selectState(ownerId) {
      return fetch(`http://localhost:8080/api/fees/state/${ownerId}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
        }
      })
        .then(response => {
          console.log(response);
          return response.json(); // 解析 JSON
        })
        .catch(error => {
          console.error("请求错误:", error);
        });
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-card {
  background-color: white;
  padding: 2.5rem;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 420px;
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-header h1 {
  color: #1a1a1a;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.login-header h2 {
  color: #666;
  font-size: 1.2rem;
  font-weight: normal;
  margin-bottom: 2rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  color: #4a5568;
  font-size: 0.9rem;
  font-weight: 500;
}

input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

button {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(to right, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

button:active {
  transform: translateY(0);
}

.error-message {
  color: #e53e3e;
  text-align: center;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* 移动端适配 */
@media (max-width: 480px) {
  .login-card {
    padding: 1.5rem;
  }

  .login-header h1 {
    font-size: 1.5rem;
  }

  .login-header h2 {
    font-size: 1rem;
  }

  input {
    padding: 0.7rem;
  }

  button {
    padding: 0.8rem;
  }
}

.register-link {
  text-align: center;
  margin-top: 1rem;
  color: #666;
}

.register-link a {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
}

.register-link a:hover {
  text-decoration: underline;
}
</style>